<template>
  <div>
    <el-tabs>
      <el-tab-pane label="服务向导">
        <el-form
          ref="basicFormRef"
          :model="model"
          :rules="rules"
          label-width="100px"
          class="qm-gen-form"

        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称：" prop="name">
                <el-input v-model="model.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码：" prop="code">
                <el-input v-model="model.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="是否启用：" prop="isEnabled">
            <el-radio v-model="model.isEnabled" :label="true">是</el-radio>
            <el-radio v-model="model.isEnabled" :label="false">否</el-radio>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" v-model="model.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="服务向导环节">
        <el-button type="primary" @click="addLinkColumn()">新增</el-button>
        <el-form
          ref="guideLinksFormRef"
          :show-message="true"
          :model="models"
          :rules="validLinkRules"
        >
          <vxe-table
            ref="xTable"
            :data="models.guideLinks"
            align="center"
            :auto-resize="true"
            class="content-table"
          >
            <vxe-column field="linkName" title="环节名称">
              <template #default="{ row,rowIndex }">
                <el-form-item
                  :prop="'guideLinks.' + rowIndex +'.linkName'"
                  :rules="validLinkRules.linkName"
                >
                  <el-input v-model="row.linkName" clearable></el-input>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="linkProfile" title="环节简介">
              <template #default="{ row ,rowIndex}">
                <el-form-item
                  :prop="'guideLinks.' + rowIndex+'.linkProfile'"
                  :rules="validLinkRules.linkProfile"
                >
                  <el-input v-model="row.linkProfile" clearable></el-input>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="workflowLink" title="关联工作流环节">
              <template #default="{row,rowIndex}">
                <el-form-item
                  :prop="'guideLinks.' + rowIndex+'.workflowLink'"
                  :rules="validLinkRules.workflowLink"
                >
                  <el-input v-model="row.workflowLink" clearable></el-input>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="sort" title="序号">
              <template #default="{ row ,rowIndex}">
                <el-form-item :prop="'guideLinks.' + rowIndex+'.sort'" :rules="validLinkRules.sort">
                  <el-input-number v-model="row.sort" :min="0" clearable class="number-input"></el-input-number>
                  
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="linkDesc" title="环节描述">
              <template #default="{row,rowIndex}">
                <el-form-item
                  :prop="'guideLinks.' + rowIndex+'.linkDesc'"
                  :rules="validLinkRules.linkDesc"
                >
                  <el-button type="text" @click="setLinkDesc(row.linkDesc,rowIndex)">设置环节描述</el-button>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column title="操作">
              <template #default="{rowIndex}">
                <el-button type="danger" @click="removeLinkColumn(rowIndex)">删除</el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="服务向导指南">
        <el-button type="primary" @click="addEnchiridionColumn()">新增</el-button>
        <el-form
          ref="guideEnchiridionsRef"
          :show-message="true"
          :model="models"
          :rules="validEnchiridionsRules"
        >
          <vxe-table
            ref="xTable"
            :data="models.guideEnchiridions"
            align="center"
            :auto-resize="true"
            class="content-table"
          >
            <vxe-column field="name" title="栏目名称" width="250">
              <template #default="{ row ,rowIndex}">
                <el-form-item
                  :prop="'guideEnchiridions.' + rowIndex +'.name'"
                  :rules="validEnchiridionsRules.name"
                >
                  <el-input v-model="row.name" clearable></el-input>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="content" title="栏目内容" width="250">
              <template #default="{ row ,rowIndex}">
                <el-form-item
                  :prop="'guideEnchiridions.' + rowIndex +'.content'"
                  :rules="validEnchiridionsRules.content"
                >
                  <el-button type="text" @click="setEnchiridionContent(row.content,rowIndex)">设置指南内容</el-button>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="sort" title="序号">
              <template #default="{ row ,rowIndex}">
                <el-form-item
                  :prop="'guideEnchiridions.' + rowIndex +'.sort'"
                  :rules="validEnchiridionsRules.sort"
                >
                  <el-input-number v-model="row.sort"  :min="0" ></el-input-number>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column field="isUnfold" title="是否展开">
              <template #default="{row}">
                <el-form-item>
                  <el-switch v-model="row.isUnfold"></el-switch>
                </el-form-item>
              </template>
            </vxe-column>
            <vxe-column title="操作">
              <template #default="{rowIndex}">
                <el-button type="danger" @click="removeEnchiridionColumn(rowIndex)">删除</el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="设置环节描述"
      :visible.sync="dialogVisibleLink"
      width="50%"
      :append-to-body="true"
      @close="onLinkDialogClose"
    >
      <editor v-model="currentLinkDesc" :min-height="500" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleLink = false">取消</el-button>
        <el-button type="primary" @click="saveLinkDesc">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置指南内容"
      :visible.sync="dialogVisibleEnchiridion"
      width="50%"
      :append-to-body="true"
      @close="onEnchiridionDialogClose"
    >
      <editor v-model="currentEnchiridionContent" :min-height="500" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEnchiridion = false">取消</el-button>
        <el-button type="primary" @click="saveEnchiridionContent">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
export default {
  components: {
    Editor
  },
  props: {
    model: Object,
    models: Object,
    controlData: Object,
    pageAction: String,
    disabled: Boolean
  },
  data() {
    return {
      dialogVisibleLink: false,
      dialogVisibleEnchiridion: false,
      currentLinkDesc: undefined,
      currentEnchiridionContent: undefined,
      currentLinkIndex: "",
      currentEnchiridionIndex: "",
      rules: {
        name: [
          {
            required: true,
            message: "请选择服务向导名称",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入服务向导编码",
            trigger: "blur"
          }
        ],

        isEnabled: [
          {
            required: true,
            message: "请选择是否启用"
          }
        ]
      },
      validLinkRules: {
        linkName: [
          { required: true, message: "请输入环节名称", trigger: "blur" }
        ]
      },
      validEnchiridionsRules: {
        name: [
          { required: true, message: "请输入栏目名称", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    removeLinkColumn(rowIndex) {
      this.$confirm("确定要删除此列吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.models.guideLinks.splice(rowIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    addLinkColumn() {
      this.models.guideLinks.push(
        Object.assign({}, this.controlData.serviceGuideLinkModel)
      );
    },
    removeEnchiridionColumn(rowIndex) {
      this.$confirm("确定要删除此列吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.models.guideEnchiridions.splice(rowIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    addEnchiridionColumn() {
      this.models.guideEnchiridions.push(
        Object.assign({}, this.controlData.serviceGuideEnchiridions)
      );
    },
    setLinkDesc(linkDesc, rowIndex) {
      this.currentLinkDesc = linkDesc;
      this.dialogVisibleLink = !this.dialogVisibleLink;
      this.currentLinkIndex = rowIndex;
    },
    setEnchiridionContent(content, rowIndex) {
      this.currentEnchiridionContent = content;
      this.dialogVisibleEnchiridion = !this.dialogVisibleEnchiridion;
      this.currentEnchiridionIndex = rowIndex;
    },
    saveLinkDesc() {
      this.models.guideLinks[
        this.currentLinkIndex
      ].linkDesc = this.currentLinkDesc;
      this.dialogVisibleLink = false;
    },
    saveEnchiridionContent() {
      this.models.guideEnchiridions[
        this.currentEnchiridionIndex
      ].content = this.currentEnchiridionContent;
      this.dialogVisibleEnchiridion = false;
    },
    onLinkDialogClose() {
      this.currentLinkIndex = undefined;
    },
    onEnchiridionDialogClose() {
      this.currentEnchiridionIndex = undefined;
    }
  }
};
</script>

<style scoped>
.content-table >>> .el-form-item {
  margin-bottom: 25px;
  margin-top: 10px;
}
.content-table >>> .el-form-item__content {
  margin-left: 0px !important;
}
</style>